<template>
  <div>
    <a-spin :spinning="loading">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
        <a-form-item v-for="item in info" :key="item.level_id" :label="item.label">
          <div class="content">
            <div class="flexStyle">
              <span>直推拨打电话</span>
              <a-switch v-model="item.direct_enable_phone" checked-children="开" un-checked-children="关" />
            </div>
            <div class="flexStyle">
              <span>直推拨打电话</span>
              <a-switch v-model="item.direct_enable_detail" checked-children="开" un-checked-children="关" />
            </div>
            <div class="flexStyle">
              <span>直推拨打电话</span>
              <a-switch v-model="item.indirect_enable_phone" checked-children="开" un-checked-children="关" />
            </div>
            <div class="flexStyle">
              <span>直推拨打电话</span>
              <a-switch v-model="item.indirect_enable_detail" checked-children="开" un-checked-children="关" />
            </div>
          </div>
        </a-form-item>
      </a-form>
      <a-form style="margin: 20px 0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" style="margin-right: 10px" @click="upload">提交</a-button>
          <a-button @click="getInfo">重置</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { getAppListAPI } from '@/api/product.js'
import { getIncomeListAPI } from '@/api/follow.js'
export default {
  name: 'teamMemberPermission',
  data() {
    return {
      loading: false,
      info: []
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      try {
        this.loading = true
        const { data } = await getAppListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, scene: 'user_team_level_rule' })
        const array = data.rule.map(item => {
          if (item.direct_enable_phone == 1) {
            item.direct_enable_phone = true
          } else {
            item.direct_enable_phone = false
          }
          if (item.direct_enable_detail == 1) {
            item.direct_enable_detail = true
          } else {
            item.direct_enable_detail = false
          }
          if (item.indirect_enable_phone == 1) {
            item.indirect_enable_phone = true
          } else {
            item.indirect_enable_phone = false
          }
          if (item.indirect_enable_detail == 1) {
            item.indirect_enable_detail = true
          } else {
            item.indirect_enable_detail = false
          }
          return item
        })
        this.info = array
      } finally {
        this.loading = false
      }
    },
    async upload() {
      console.log(this.info)
      const form = JSON.parse(JSON.stringify(this.info))
      form.map(item => {
        if (item.direct_enable_phone) {
          item.direct_enable_phone = 1
        } else {
          item.direct_enable_phone = 0
        }
        if (item.direct_enable_detai) {
          item.direct_enable_detail = 1
        } else {
          item.direct_enable_detail = 0
        }
        if (item.indirect_enable_phone) {
          item.indirect_enable_phone = 1
        } else {
          item.indirect_enable_phone = 0
        }
        if (item.indirect_enable_detail) {
          item.indirect_enable_detail = 1
        } else {
          item.indirect_enable_detail = 0
        }
        return item
      })
      try {
        await getIncomeListAPI({
          brand_id: process.env.VUE_APP_BRAND_ID,
          rule: form,
          scene: 'user_team_level_rule'
        })
        this.getInfo()
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
  margin: 0;
}
.content {
  display: flex;
}
.flexStyle {
  margin: 0 10px;
  span {
    margin-right: 10px;
  }
}
</style>
